<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客正文</title>
    <link rel="stylesheet" href="css/content_com.css">
    <link rel="stylesheet" href="css/blog_content.css">
    <link rel="stylesheet" href="editor.md/css/editormd.preview.min.css" />
    <script src="js1/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <link rel="icon" href="pict/login.png" sizes="16x16">
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="images/others/head_new.jpg" alt="">
        <span class="title">博客系统</span>
        <span class="spacer"></span>
        <a href="index1.html">主页</a>
        <a id="isedit" href="blog_write.html">写博客</a>
        <a href="explain.html">博客说明</a>
        <a id="islogin" href="javascript:logout()">退出</a>
    </div>
    <!-- 版心 -->
    <div class="container">
        <!-- 左侧个人信息 -->
        <div class="container-left">
            <div class="card">
                <img id="pic" src="images/login/loginbag.jpg">
                <h3 id="username"></h3>
                <div class="counter">
                    <span>获赞数</span>
                    <span id="count"></span>
                </div>
                <div class="counter">
                    <span>文章</span>
                    <span>热度</span>
                </div>
                <div class="counter">
                    <span id="acount"></span>
                    <span id="readcount"></span>
                </div>
                <div class="counter">
                    <img id="image1" src="images/others/bad.jpeg" style="width: 30px ; height: 30px">
                    <img id="image2" src="images/others/no.jpeg" style="width: 30px ; height: 30px">
                </div>
            </div>
            <div class="agree">点赞</div>
            <div class="colle">收藏</div>
            <img class="cute1" src="images/others/catone.jpg" >
            <img src="images/others/cattwo.jpg" class="cute2" >
        </div>
        <!-- 右侧内容详情 -->
        <div class="container-right">
            <div class="blog-content">
                <!-- 博客标题 -->
                <h3 id="title"></h3>
                <!-- 博客时间 -->
                <div class="date"><span id="ctime" ></span></div>

                <!-- 博客正文 -->
                <div id="context">
            
                </div>
               
            </div>
        </div>
    </div>
    <script>
         //获取当前url中某个参数的方法
         function getURLParam(key){
            var params=location.search;
            if(params.indexOf("?")>=0){
                params=params.substring(1).split("&");
                var paramArr=params;
                for(var i=0;i<paramArr.length;i++){
                    var namesvalues=paramArr[i].split("=");
                    if(namesvalues[0]==key){
                        return namesvalues[1];
                    }
                }
            }else{
                return "";
            }
        }

         //判断是否登录状态
         function isLogin(){
             jQuery.ajax({
                 url:"loginUserInfo",
                 type:"POST",
                 success:function(result){
                     if(result!=null && result != ""){
                         //登录状态
                         jQuery("#isedit").attr("href","blog_edit.html");
                         jQuery("#islogin").text("退出");
                         jQuery("#islogin").attr("href","javascript: logout()");
                     }else{
                         //非登录状态
                         jQuery("#isedit").attr("href","login.jsp");
                         jQuery("#islogin").text("登录");
                         jQuery("#islogin").attr("href","login.jsp");
                     }
                 }
             });
         }
         isLogin();

        //加载文章
         //1.先得到url中的文章id
         var aid = getURLParam("aid");
         if(aid == null || aid <= 0 || aid == ""){
            // alert("抱歉：访问失败，非法参数！");
            //todo： 跳转到首页
         }else{
            function loadArticle(){
            //2.请求后端得到文章详情并进行显示
            jQuery.ajax({
                url:"artdetail",
                type:"POST",
                data:{"aid":aid},
                success:function(result){
                    if(result!=null){
                        if(result!=null && result.aid>0){
                            //成功查询详情
                            jQuery("#title").text(result.title);
                            jQuery("#ctime").text(result.createtime);
                            jQuery("#readcount").text(result.readcount);
                            // jQuery("#context").html(result.data.context);
                            markdownToHtml(result.context);
                        }else{
                            alert("抱歉！当前文章不存在！")
                        }
                    }else{
                        alert("抱歉！后端程序不可用！")
                    }

                }
            });     
        }
        
        loadArticle();

        //加载用户的个人信息
        function loadUserInfo(){
            //1.先得到url中的文章aid
         var aid=getURLParam("aid");
         //请求后端查询用户的详情信息
         jQuery.ajax({
             url:"getuserbyaid",
             type:"Get",
             data:{"aid":aid},
             success:function(result){
                 if(result != null){
                     jQuery("#username").text(result.username);
                     jQuery("#acount").text(result.count);
                     jQuery("#count").text(result.goodCount);
                     // jQuery("#pic").attr("src","https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.youxia.org%2Fwp-content%2Fuploads%2F2021%2F07%2FChMkKWDitKaIZbIzAAO6Vh9LKioAARfpQNDsKEAA7pu854_1625609790.jpg&refer=http%3A%2F%2Fwww.youxia.org&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665113665&t=6ba00c61b3a7132d87ff3f5e5713d2b1");
                 }else{
                     alert("后端程序不可用");
                 }
             },
         });
        }
        loadUserInfo();

        //当前文章阅读量+1
        function addRcount(){
            jQuery.ajax({
                url:"addrcount",
                type:"POST",
                data:{"aid":aid},
                success:function(result){
                    if(result!=null && result == 1){
                       console.log(result);
                    }else{
                        alert("后端程序不可用 ");
                    }
                }
            });
        }
        addRcount();

                       //退出事件
             //退出事件
             function logout() {
                 if (confirm("是否退出？")) {
                     //1.session清空
                     jQuery.ajax({
                         url: "loginout",
                         type: "POST",
                         success: function (result) {
                             if (result != null && result == 1) {
                                 alert("退出成功！");
                                 location.href = "index.html";
                             } else {
                                 alert("抱歉，操作出错，请重试！");
                             }
                         }
                     });

                 }
             }
    }

         //点赞
         let agree;
         function loadArticle1(){
             //1.先得到url中的文章aid
             var aid=getURLParam("aid");
             //请求后端查询用户的详情信息
             jQuery.ajax({
                 url: "isGood",
                 type: "POST",
                 data: {"aid": aid},
                 success :function (result) {
                     if (result == 1) {
                         document.getElementById("image1").src = "images/others/good.jpeg";
                         agree=1;
                         console.log(agree);
                     } else {
                         agree=0;
                         console.log(agree);
                     }
                 }
             })
         }
         loadArticle1();

         //收藏
         let colle;
         function loadArticle2(){
             //1.先得到url中的文章aid
             var aid=getURLParam("aid");
             //请求后端查询用户的详情信息
             jQuery.ajax({
                 url: "isYes",
                 type: "POST",
                 data: {"aid": aid},
                 success :function (result) {
                     if (result == 1) {
                         document.getElementById("image2").src = "images/others/yes.jpeg";
                         colle=1;
                         console.log(colle);
                     } else {
                         colle=0;
                         console.log(colle);
                     }
                 }
             })
         }
         loadArticle2();
         function goodCount(){
             //1.先得到url中的文章aid
             var aid=getURLParam("aid");
             jQuery.ajax({
                 url: "goodCount",
                 type: "POST",
                 data: {"aid": aid},
                 success :function (result) {
                     if(result!=null && result == 0){
                         document.getElementById("image1").src = "images/others/good.jpeg";
                         loadUserInfo();
                     }else{
                         alert("该文章确实优秀，但也只能点一次赞哟！");
                     }
                 }
             })
         }

         function yesCount(){
             //1.先得到url中的文章aid
             var aid=getURLParam("aid");
             jQuery.ajax({
                 url: "yesCount",
                 type: "POST",
                 data: {"aid": aid},
                 success :function (result) {
                     if(result!=null && result == 0){
                         document.getElementById("image2").src = "images/others/yes.jpeg";
                     }else{
                         alert("该篇优秀的文章已纳入你的囊中");
                     }
                 }
             })
         }

         function myUserInfo() {
             jQuery.ajax({
                 url: "isUser",
                 type: "POST",
                 data: "",
                 success: function (result) {
                     if (result != null) {
                         //前后端交互正常
                         if (result == 1) {
                         } else {
                             alert("抱歉，请先登录！");
                             location.href="login.jsp";
                         }
                     } else {
                         alert("抱歉！后端程序不可用，请您稍后再试！?");
                     }
                 }
             });
         };
         var y_pic=60,x_pic=19;
           $('#image1').fadeIn(1000).click(function (e) {
               $('.cute1').css({
                    display:'block',
                   top:(e.pageY-y_pic)+'px',
                   left:(e.pageX-x_pic)+'px'
               })
               myUserInfo();
               goodCount();
               agree=1;
         })

         var x=5,y=10;
         $('#image1').mousemove(function (e) {
            $('.agree').attr('src',$(this).attr('src')).css({
                display:'block',
                left:(e.pageX+x)+'px',
                top:(e.pageY+y)+'px',

            })

             document.getElementById("image1").src="images/others/good.jpeg";
         })
         $('#image1').mouseout(function () {
                if(agree!=1){
                    document.getElementById("image1").src="images/others/bad.jpeg";
                }
             $('.agree').hide();
             $('.cute1').fadeOut(500)
         })
         $('#image2').click(function (e) {
             myUserInfo();
             yesCount();
             $('.cute2').fadeIn(1000).css({
                  display:'block',
                 top:(e.pageY-y_pic)+'px',
                 left:(e.pageX-x_pic)+'px'
             })
             colle=1;
         })
         $('#image2').mousemove(function (e) {
             document.getElementById("image2").src="images/others/yes.jpeg"
             $('.colle').attr('src',$(this).attr('src')).css({
                 display:'block',
                 left:(e.pageX+x)+'px',
                 top:(e.pageY+y)+'px'
             })
         })

         $('#image2').mouseout(function () {
             if(colle!=1) {
                 document.getElementById("image2").src = "images/others/no.jpeg"
             }
             $('.colle').hide();
             $('.cute2').fadeOut(500)
         })
    function                                            markdownToHtml(md){
        editormd.markdownToHTML("context", {
            markdown : md, // Also, you can dynamic set Markdown text
            //     // htmlDecode : true,  // Enable / disable HTML tag encode.
            //     // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
            });
    }
    </script>

</body>

</html>